<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    msg 是 app中
    button是Child中的

    app是child的父组件

    不成功的原因是
    this.$on 和 this.$emit两个this不是同一个
    this.$emit的this指向Child组件
    this.$on的this指向App组件
    所以导致最终的结果没有出现

    Vue官方给出了一种简单的解决方案
    // 普通情况this.$on('自定义事件名', 函数) 因为this不同，所以我们最终的效果无法实现

    直接在父组件模板中找到子组件标签，找到后，在子组件标签中写
    // this.$on('自定义事件名', 函数) 这行用于对比
    <child @自定义事件名="函数"></child>


    步骤
      1 在子组件中触发自定义事件并传递数据
      2 在父组件中methods中添加一个函数（自定义事件触发时执行的函数）
      3 在父组件的组件模板中找到子组件标签，在标签上添加
        @自定义事件名="第2步中添加的函数名"

   -->
  <div id="app">
    <Child @changemsg="getMsg"></Child>
    <hr>
    {{msg}}
  </div>
  <script src="./vue.js"></script>
  <script>
    Vue.component('Child', {
      template: `
        <button @click="fn">按钮</button>
      `, 
      methods: {
        fn () {
          this.$emit('changemsg', '子组件中传递过去的msg信息')
        }
      }
    })

    const app = new Vue({
      el: '#app',
      data: {
        msg: ''
      },
      methods: {
        getMsg (msg) {
          this.msg = msg
        }
      }
    })
    
  
  </script>
</body>
</html>